// tinymce.init{
//   selector:'textarea';
// }
// 上述配置，是将多行文本框替换为富文本编辑器

// 这个代码，老师已经封装好 ../assets/lib/tinymce/tinymce.min.js里面，函数叫做function initEdter(){0}
initEditor();

// 页面处理：获取分类
axios.get('/my/category/list').then(res => {
  console.log(res)
  let { status, data } = res.data;
  if (status === 0) {
    let str = '';
    data.forEach(item => {
      str += `
      <option value='${item.id}'>
      ${item.name}
      </option>
      `
    });
    // 把str放进下拉框里
    $("select[name=cate_id").append(str);
    // 更新渲染
    let form = layui.form;
    form.render('select')
  }
})


// 封面处理
// 1、初始的裁剪效果
// 1.1) 初始化图片裁剪器
var $image = $('#image')
// 1.2) 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 1.3) 初始化裁剪区域
$image.cropper(options);

// 2、点击“选择封面”能后触发文件域的单击事件
$('button:contains("选择封面")').click(function () {
  $('#file').trigger('click');
});
// 3、当文件域内容改变的时候，更换图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    var fileObj = this.files[0];
    // 3.2) 创建url
    var url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper('replace', url);
  }
});


// 表单提交
$("form").on('submit', function (e) {
  e.preventDefault();
  let fd = new FormData(this);//this是DOM对象，$(this)是jQuery对象
  // 修改content
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 对于图片，需要剪裁，剪裁之后转成文件对象格式，追加到fd中
  let canvas = $image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  });
  // 把canvas文件转成文件对象格式
  canvas.toBlob(function (blob) {
    // 追加文件对象到fd中
    fd.append('cover_img', blob);

    // 检查一下，fd对象中，是否取得了接口要求的所有参赛
    // fd.forEach((val, key) => {
    //     console.log(key, val);
    // });
    // return;
    // 发送ajax请求，完成最终的添加
    axios.post(`/my/article/add`, fd).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 添加成功，跳转到 文章列表 页面
        // location.href = './list.html'
      }
    })
  });

})